<template>
  <ul class="servico">
    <li>
      <h3>{{ $t("language.business.title2") }}</h3>
      <p>{{ $t("language.business.s1") }}</p>
      <p>{{ $t("language.business.s2") }}</p>
    </li>
    <li>
      <NuxtImg src="/img/bb2.png" alt="" />
    </li>
  </ul>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
.servico {
  position: relative;
  color: #fff;
  width: 100%;
  height: 100%;
  @include flex(row, space-between, center);

  li:nth-child(1) {
    width: 60%;
    height: 100%;
    padding-top: 140px;
    position: relative;
    z-index: 7;
    @include flex(column, flex-start,flex-start);
    h3 {
      font-size: 30px;
      color: #fff;
      margin: 0px 0 60px;
    }

    span {
      color: #b5bacb;
      font-size: 18px;
      display: block;
      margin-bottom: 5px;
    }

    p {
      width: 100%;
      height: 36px;
      @include flex(row, flex-start, center);
      font-size: 18px;
      border-radius: 18px;
      color: #b5bacb;
      margin-bottom: 60px;
    }

  }

  li:nth-child(2) {
    height: 100%;
    position: relative;

    img {
      height: 86%;
      display: block;
      position: absolute;
      right: 40px;
      bottom: 0;
    }
  }


}
</style>
